width

Internet Explorer/Internet Explorer

Netscape/Netscape

Opera/Opera

Safari/Safari

Firefox/Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Помилки

Частково

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Коротка інформація

CSS

CSS1

Значення за умовчанням

auto

Наслідує

Ні

Застосовується

До блокових елементів

Аналог HTML

<img width>, <table width>

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/visudet.html#propdef - width

Опис

Встановлює ширину блокових або замінюваних елементів (до них, наприклад, відноситься тег <IMG>). Ширина не включає товщину меж навколо елементу, значення відступів і полів.

Браузери неоднаково працюють з шириною, результат відображення залежить від використовуваного DOCTYPE. У таблиці. 1 приведені можливі варіанти DOCTYPE і отримувана ширина.

Таблиця. 1. Дія width у браузерах

DOCTYPE

Internet Explorer

Firefox

Opera

Не вказаний

Якщо вміст перевищує задану ширину, то блок змінює свої розміри, аідлаштовуючись під вміст. Інакше ширина блоку дорівнює значенню width.

У усіх випадках Firefox діє по специфікації CSS. А саме, ширина блоку виходить складанням значень width, padding, margin і border.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх блоку.

Ширина дорівнює значенню width.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.

"Перехідний"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

"Строгий"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Ширина формується шляхом складання значень width, padding, margin і border.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.

Ширина дорівнює значенню width плюс padding, margin, і border.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.

XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Синтаксис

width: значення | відсотки | auto | inherit

Значення

Як значення приймаються будь-які одиниці довжини, прийняті в CSS, - наприклад, піксели (px), дюйми (in), пункти (pt) та ін. При використанні процентного запису ширина елементу обчислюється залежно від ширини батьківського елементу. Якщо батько явно не вказаний, то в його якості виступає вікно браузеру.

auto Встановлює ширину виходячи з типу і утримуваного елементу.

inherit Наслідує значення батька.

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">
    <title>width</title>
    <style type="text/css">
      .layer1 {
        width: 300px; /* Ширина блоку */
        background: #fc0; /* Колір фону */
        padding: 7px; /* Полів навколо тексту */
        border: 1px solid #ccc; /* Параметрів рамки */
      }
      .layer2 {
        width: 400px; /* Ширина текстового блоку */
      }
    </style>
  </head>
  <body>
  
    <div class="layer1">
      <p class="layer2">Луцький національний техніний університет  
є одним із найкращих професійних закладів освіти у місті Луцьку. 
Найкращою з підготовки спеціалістів є кафедра професійного навчання, що займається професійною підготовкою студентів..</p>
    </div>
  
  </body>
</html>

Результат цього прикладу, як він відображається у бразере Opera показаний ні мал. 1.

Мал. 1. Ширина блоку у браузері Opera

Об'єктна модель

[window.]document.getElementById("elementID").style.width

Браузери

Браузер Internet Explorer 6 некоректно визначає width як min - width. У режимі несумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно обчислює ширину елементу, не додаючи до неї значення відступів, полів і меж.

Internet Explorer до сьомої версії включно не підтримує значення inherit.